
import ElCheckbox from "element-ui/packages/checkbox";
import { debounce, throttle } from "throttle-debounce";
import {
    addResizeListener,
    removeResizeListener
} from "element-ui/src/utils/resize-event";
import Mousewheel from "element-ui/src/directives/mousewheel";
import Locale from "element-ui/src/mixins/locale";
import Migrating from "element-ui/src/mixins/migrating";
import {
    createStore,
    mapStates
} from "element-ui/packages/table/src/store/helper";
import TableLayout from "@/components/elementui/packages/table/src/table-layout";
import TableBody from "@/components/elementui/packages/table/src/table-body";
import TableHeader from "@/components/elementui/packages/table/src/table-header";
import TableFooter from "@/components/elementui/packages/table/src/table-footer";
import TableColumn from "@/components/elementui/packages/table/src/table-column";
import { parseHeight } from "@/components/elementui/packages/table/src/util";
import {EltableProps} from "./config";
let tableIdSeed = 1;
export default {
    mixins: [Locale, Migrating],
    props:{
      ...EltableProps
    },
    directives: {
        Mousewheel
    },
    components: {
        TableHeader,
        TableFooter,
        TableBody,
        ElCheckbox,
        TableColumn
    },
    computed: {
        
        ...mapStates({
            selection: 'selection',
            columns: 'columns',
            tableData: 'data',
            fixedColumns: 'fixedColumns',
            rightFixedColumns: 'rightFixedColumns'
        }),
        bodyWidth() {
            const { bodyWidth, scrollY, gutterWidth } = this.layout;
            return bodyWidth ? bodyWidth - (scrollY ? gutterWidth : 0) + 'px' : '';
        },
        bodyHeight() {
            const { headerHeight = 0, bodyHeight, footerHeight = 0} = this.layout;
            if (this.height) {
              return {
                height: bodyHeight ? bodyHeight + 'px' : ''
              };
            } else if (this.maxHeight) {
              const maxHeight = parseHeight(this.maxHeight);
              if (typeof maxHeight === 'number') {
                return {
                  'max-height': (maxHeight - footerHeight - (this.showHeader ? headerHeight : 0)) + 'px'
                };
              }
            }
            return {};
          },
          emptyBlockStyle() {
            if (this.data && this.data.length) return null;
            let height = '100%';
            if (this.layout.appendHeight) {
              height = `calc(100% - ${this.layout.appendHeight}px)`;
            }
            return {
              width: this.bodyWidth,
              height
            };
          }
    },
    data() {
        const { hasChildren = 'hasChildren', children = 'children' } = this.treeProps;
        this.store = createStore(this, {
            rowKey: this.rowKey,
            defaultExpandAll: this.defaultExpandAll,
            selectOnIndeterminate: this.selectOnIndeterminate,
            // TreeTable 的相关配置
            indent: this.indent,
            lazy: this.lazy,
            lazyColumnIdentifier: hasChildren,
            childrenColumnName: children
        });
        const layout = new TableLayout({
            store: this.store,
            table: this,
            fit: this.fit,
            showHeader: this.showHeader
        });
        return {
            layout,
            isHidden: false,
            renderExpanded: null,
            resizeProxyVisible: false,
            resizeState: {
                width: null,
                height: null
            },
            // 是否拥有多级表头
            isGroup: false,
            scrollPosition: 'left'
        };
    },
    created() {
        this.tableId = 'el-table_' + tableIdSeed++;
    },
    mounted() {
        //this.bindEvents();
        this.store.updateColumns();
        this.doLayout();

        this.resizeState = {
            width: this.$el.offsetWidth,
            height: this.$el.offsetHeight
        };

        // init filters
        this.store.states.columns.forEach(column => {
            if (column.filteredValue && column.filteredValue.length) {
                this.store.commit('filterChange', {
                    column,
                    values: column.filteredValue,
                    silent: true
                });
            }
        });

        this.$ready = true;
    },
    methods: {
        doLayout() {
            if (this.shouldUpdateHeight) {
                this.layout.updateElsHeight();
            }
            this.layout.updateColumnsWidth();
        },
    },
    


}